﻿<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-form inline label-width="60px" size="small" :model="search">
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="handleToAdd">新增商户</el-button>
      </el-form-item>
      <el-form-item label="商户编号" >
        <el-input v-model="search.merchant_num"></el-input>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="search.full_name"></el-input>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker type="daterange" value-format="yyyy-MM-dd" tart-placeholde="开始时间" end-placeholde="结束时间" v-model="search.time"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="success" size="small" icon="el-icon-search" @click="handleClickSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row class="mt10">
      <el-table size="small" :data="date" v-loading="loading" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
        <el-table-column align="center" label="商户编号" prop="merchant_num"></el-table-column>
        <el-table-column align="center" label="公司名称">
          <template slot-scope="scope">
            <span>{{ scope.row.full_name }} <svg-icon :icon-class="scope.row.is_blue ? 'lh' : ''"></svg-icon> </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="门店数量">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClickGoToStore(scope.row.merchant_id)">{{ scope.row.store_quantity }}家</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="负责人" prop="leader_name"></el-table-column>
        <el-table-column align="center" label="申请时间" prop="update_at"></el-table-column>
        <el-table-column align="center" label="基础资料审核状态">
          <template slot-scope="scope">
            <span :class="scope.row.base_chk_remark === '部分通过' ? 'warning' : scope.row.base_chk_remark === '未通过' ? 'err' : ''">{{ scope.row.base_chk_remark }}</span>
            <el-button type="text" size="small"  @click="handleClickGoToEdit(scope.row.merchant_num)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="通道及费率配置">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDialogInit(scope.row.merchant_num)">配置</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="通道审核状态">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.channel_status.length !== 0" effect="light">
              <div>{{ scope.row.channel_status[0].b_channel + (scope.row.channel_status[0].check_status === 100 ? '申请中' : scope.row.channel_status[0].check_status === 200 ? '已成功' : scope.row.channel_status[0].check_status === -100 ? '已禁用' : scope.row.channel_status[0].check_status === -200 ? '申请失败' : scope.row.channel_status[0].check_status === 110 ? '已审核入驻中' : '无') }} <i class="el-icon-info"></i></div>
              <div slot="content">
                <p v-for="item in scope.row.channel_status" :key="item.id">
                  <i class="el-icon-remove-outline tip" v-if="item.check_status === 100 || item.check_status === 110"></i>
                  <svg-icon v-else 
                  :icon-class="item.check_status === 200 ? 'success' : item.check_status === -200 ? 'error' : '' "
                  :class="item.check_status === 200 ? 'succ' : item.check_status === -200 ? 'err' : ''"
                  ></svg-icon>
                  {{ item.b_channel + (item.check_status === 100 ? '申请中' : item.check_status === 200 ? '已成功' : item.check_status === -100 ? '已禁用' : item.check_status === -200 ? '申请失败' : item.check_status === 110 ? '已审核入驻中' : '无') }}
                </p>
              </div>
            </el-tooltip>
            <el-button type="text" size="small" @click="handleClickGoToChannel(scope.row.merchant_num)">新增通道</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="fr mt20" layout="total, prev, pager, next, jumper" :total="page.total" :page-size="page.size" :current-page.sync="page.current" @current-change="handleChangeCurrent"></el-pagination>
    </el-row>
    <el-dialog title="支付通道配置" :visible.sync="dialogVisible" width="700px">
      <channel-react ref="rates" v-if="dialogVisible" :menu="menu" :PosMenu="PosMenu" :tabs="tabs" :merchant_num="merchant_num" @tabUpdate="handleToogleTab"></channel-react>
      <div slot="footer">
        <el-button v-if="tabs && menu.length > 0" type="primary" size="small" @click="handleModelDialog" :loading="btn_loading">确认修改</el-button>
        <el-button v-if="!tabs && PosMenu.length > 0" type="primary" size="small" @click="handleModelPosDialog" :loading="pos_loading">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { myCommerInit, myCommerSearch, myCommerPage, myCommerPosChannelUpdate, myCommerChannelPosInit, myCommerChannelInit, myCommerChannelUpdate } from '@/api/shop'
import { mapGetters } from 'vuex'
import channelReact from './components/index/reactConfig'

export default {
  name: 'MerchantEntry',
  components: {
    Breadcrumb,
    channelReact
  },
  data() {
    return {
      loading: true,
      dialogVisible: false,
      btn_loading: false,
      pos_loading: false,
      tabs: true,
      merchant_num: null,
      model: 0,
      date: [],
      menu: [],
      PosMenu: [],
      page: {
        size: 0,
        total: 0,
        current: 1
      },
      search: {
        full_name: '',
        merchant_num: '',
        time: []
      }
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  methods: {
    handleDocumentInit() {
      myCommerInit(this.id).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.data
          this.page.size = res.data.result.per_page
          this.page.total = res.data.result.total
          this.loading = false
        } else {
          this.$message.error(res.data.errorMsg)
          this.loading = false
        }
      })
    },
    handleChangeCurrent(v) {
      this.loading = true
      myCommerPage(this.id, v, this.search).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.data
          this.page.size = res.data.result.per_page
          this.page.total = res.data.result.total
          this.loading = false
        } else {
          this.$message.error(res.data.errorMsg)
          this.loading = false
        }
      })
    },
    handleClickSearch() {
      this.loading = true
      myCommerSearch(this.id, this.search).then(res => {
        if (res.data.errorCode === 0) {
          this.date = res.data.result.data
          this.page.size = res.data.result.per_page
          this.page.total = res.data.result.total
          this.page.current = res.data.result.current_page
          this.loading = false
        } else {
          this.$message.error(res.data.errorMsg)
          this.loading = false
        }
      })
    },
    handleToAdd() {
      this.$router.push({ name: 'newMerchant' })
    },
    handleClickGoToEdit(id) {
      this.$router.push({ name: 'merchantDetails', query: { merchant_num: id, type: 'merchant' }})
    },
    handleClickGoToStore(id) {
      this.$router.push({ name: 'checkShop', query: { merchant_num: id }})
    },
    handleClickGoToChannel(id) {
      this.$router.push({ name: 'merchantDetails', query: { merchant_num: id, type: 'channel' }})
    },
    handleDialogInit(id) {
      this.model = 0
      myCommerChannelInit(id).then(res => {
        if (res.data.errorCode === 0) {
          this.merchant_num = id
          this.tabs = true
          this.menu = res.data.result
          this.model++
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
      myCommerChannelPosInit(id).then(res => {
        if (res.data.errorCode === 0) {
          this.PosMenu = res.data.result
          this.model++
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleModelDialog() {
      this.$refs.rates.handleValidMoible().then((obj) => {
        if (obj.valid) {
          this.btn_loading = true
          myCommerChannelUpdate(this.$refs.rates.paychannel, obj.id).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.btn_loading = false
              this.dialogVisible = false
            } else {
              this.$message.error(res.data.errorMsg)
              this.btn_loading = false
            }
          })
        } else {
          this.$message.error('请认真填写通道费率~')
        }
      })
    },
    handleModelPosDialog() {
      this.$refs.rates.handleValidPos().then((obj) => {
        if (obj.valid) {
          this.pos_loading = true
          myCommerPosChannelUpdate(obj.id, this.$refs.rates.poschannel, this.$refs.rates.POSChannel).then(res => {
            if (res.data.errorCode === 0) {
              this.pos_loading = false
              this.$message.success(res.data.errorMsg)
            } else {
              this.pos_loading = false
              this.$message.error(res.data.errorMsg)
            }
          })
        } else {
          this.$message.error('请先完成POS机相关配置！')
        }
      })
    },
    handleToogleTab(v) {
      v.index === '0' ? this.tabs = true : v.index === '1' ? this.tabs = false : ''
    }
  },
  created() {
    this.handleDocumentInit()
  },
  watch: {
    model(n, o) {
      if (n === 2) {
        this.dialogVisible = true
      } else {
        this.dialogVisible = false
      }
    }
  }
}
</script>
